<template>
    <div class="home">
        <!-- 搜索 -->
        <van-search
            v-model="searchVal"
            shape="round"
            background="rgba(0,0,0,0)"
            placeholder="搜索生鲜"
            @focus="toSearch"
            />
        <!-- banner -->
        <van-swipe class="my-swipe" :autoplay="6000" duration="1000" indicator-color="white">
            <van-swipe-item v-for="item in bannerImage"><img :src="item.imageUrl"></van-swipe-item>
        </van-swipe>

        <!-- 分类 -->
        <div class="category">
            <ul>
                <li 
                v-for="item in category" 
                :key="item.id" 
                @click="toCategory(item.id)"
                >
                    <img :src="item.image">
                    <span>{{ item.title }}</span>
                </li>
            </ul>
        </div>
        <!-- 抢购 -->
        <div class="limit">
            <div class="limit-top">
                <div class="top-left">
                    限时抢购
                </div>
                <div class="top-middle">
                    <van-count-down :time="time">
                        <template #default="timeData">
                            <span class="block">{{ timeData.hours }}</span>
                            <span class="colon">:</span>
                            <span class="block">{{ timeData.minutes }}</span>
                            <span class="colon">:</span>
                            <span class="block">{{ timeData.seconds }}</span>
                        </template>
                    </van-count-down>
                </div>
                <div class="top-right">
                    更多&nbsp;<van-icon name="arrow" />
                </div>
            </div>
            <div class="limit-main">
                <swiper
                    :slides-per-view="3"
                    :space-between="50"
                    :loop="true" 
                    :free-mode="true"
                >
                    <swiper-slide v-for="item in limit" :key="item.id">
                        <div class="swiper-top">
                            <img :src="item.image"   @click="toDetail">
                        </div>
                        <div class="swiper-bottom">
                            <div class="title">
                                <span>{{ item.title }}</span>
                                <span>{{ item.detail }}</span>
                            </div>
                            <div class="price">
                                <div>
                                    <b>￥{{ item.price }}</b>
                                    <s>￥{{ item.salePrice }}</s>
                                </div>
                                <cart :item="item"></cart>
                            </div>
                        </div>
                    </swiper-slide>

                </swiper>
            </div>
        </div>
        <div class="recommend">
            <van-tabs 
            v-model:active="activeName" 
            animated 
            swipeable
            sticky 
            title-active-color="#7cb305"
            color="#7cb305">
                <van-tab title="推荐" name="a">
                    <div class="show-box">
                        <div class="goods-box" v-for="item in recommendList" :key="item.id">
                            <div class="img-box">
                                <img :src="item.image">
                                <span class="shop">【{{ item.shop }}】</span>
                            </div>
                            <div class="title">{{ item.title }}</div>
                            <div class="price">
                                <span>￥{{ item.price }}</span>
                                <cart :item="item"></cart>
                            </div>
                        </div>
                    </div>
                </van-tab>
                <van-tab title="销量排行" name="b"> 
                    <div class="show-box">
                        <div class="goods-box" v-for="item in saleNumber" :key="item.id">
                            <div class="img-box">
                                <img :src="item.image">
                                <span class="shop">【{{ item.shop }}】</span>
                            </div>
                            <div class="title">{{ item.title }}</div>
                            <div class="price">
                                <span>￥{{ item.price }}</span>
                                <cart :item="item"></cart>
                            </div>
                        </div>
                    </div></van-tab>
                <van-tab title="平价" name="c">
                    <div class="show-box">
                        <div class="goods-box" v-for="item in par" :key="item.id">
                            <div class="img-box">
                                <img :src="item.image">
                                <span class="shop">【{{ item.shop }}】</span>
                            </div>
                            <div class="title">{{ item.title }}</div>
                            <div class="price">
                                <span>￥{{ item.price }}</span>
                                <cart :item="item"></cart>
                            </div>
                        </div>
                    </div>
                </van-tab>
            </van-tabs>

        </div>
        <van-cell/>
        <van-back-top  right="15vw" bottom="13vh"/>
    </div>
</template>


<script setup>
import { onMounted,ref,computed } from 'vue'
import cart from '../../component/addcart.vue'

//引入swiper
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/css'
import 'swiper/css/free-mode'
import { useRouter } from 'vue-router'

import {useStore} from 'vuex'

const store = useStore()
const router = useRouter()

let searchVal = ref('')     //搜索框
let time = ref(0)     //倒计时数据
let activeName = ref('a')
onMounted(()=>{
    time.value = new Date('2023-05-06 9:00')-new Date()
})

 //banner图
let bannerImage = computed(()=>{
    return store.getters['homeModule/bannerUrl']
}) 

//抢购
let limit = computed(()=>{
    return store.getters['homeModule/getLimit']
})

//分类
let category = computed(()=>{
    return store.getters['homeModule/getCategory']
})

//推荐
let recommendList = computed(()=>{
    return store.getters['homeModule/getRecommend']
})

//销量
let saleNumber = computed(()=>{
    return store.getters['homeModule/getSaleNum']
})

//平价
let par = computed(()=> store.getters['homeModule/getPar'])

//跳转分类
function toCategory(id){
    store.commit('homeModule/changeCategoryNum',id)
    router.push('/category')
}

//搜索
function toSearch(){
    router.push('/search')
}
</script>

<style lang="less" scoped>
@import '../../style/common.less';
.home{
    display: block;
    position: relative;
    width: 100%;
    //搜索
    .van-search{
        width: 100%;
        position: absolute;
        top: 16px;
        left: 0;
        z-index: 999;
        /deep/.van-badge__wrapper{
            color: @c9;
            margin-right: 10px;
        }

        //input默认字体
        /deep/.van-field__control::placeholder{
            color: @c10;
        }
        /deep/.van-field__control{
            color: @c10;
        }
    }
    //banner
    .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    height: 244px;
    border-bottom: 10px solid @g4;
    img{
        width: 100%;
        height: 100%;
        border: 1px solid #eee;
        border-radius: 4px;
    }
  }

  //分类
  >.category{
    display: block;
    height: 110px;
    padding: 8px 0;
    border-bottom: 10px solid @g4;
    >ul{
        width: 100%;
        height: 100%;   
        display: flex;
        justify-content: space-between;
        >li{
            width: 24%;
            height: 100%;
            margin-top: 4px;
            border-right: 1px solid @g4;
            display: flex;
            flex-direction: column;
            align-items: center;
            >img{
                width: 50px;
                display: block;
                margin-bottom: 6px;
                height: 50px;
                border-radius: 50%;
                border: 1px solid @c5;
            }
            >span{
                font-size: .8rem;
            }
        }
    }
  }

  // 抢购
  >.limit{
        height: 250px;
        padding: 10px;
        border-bottom: 10px solid @g4;
        >.limit-top{
            padding: 6px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid @g6;
            >.top-left{
                font-size: 1rem;
                color: @c9;
            }
            >.top-right{
                font-size: .8rem;
                color: @g7;
            }
        }
        >.limit-main{
            display: block;
            height: 180px;
            >.swiper {
                height: 100%;
                >.swiper-wrapper{
                    height: 100%;
                    width: 110px;
                    >.swiper-slide{
                        width: 110px !important;
                        height: 194px;
                        margin-right: 10px !important;
                        margin-top: 10px;
                        margin-bottom: -20px;
                        >.swiper-top{
                            width: 100%;
                            height: 44%;
                            margin-bottom: 10px;
                            >img{
                                width: 88%;
                                height: 100%;
                                border: 1px solid @c8;
                                border-radius: 8px;
                            }
                        }
                        >.swiper-bottom{
                            >.title{
                                display: flex;
                                justify-content: space-around;
                                margin-bottom: 10px;
                                >span{
                                    font-size: .6rem;
                                    color: @c10;
                                    font-weight: 600;
                                }
                            }
                            >.price{
                                display: flex;
                                justify-content: space-around;
                                >div{
                                    display: flex;
                                    flex-direction: column;
                                        >b{
                                            color: red;
                                        }
                                        >s{
                                            font-size: 12px;
                                            color: #999;
                                        }
                                }
                                >.van-badge__wrapper{
                                    color: @c8;
                                    margin-top: 12px;
                                }
                            }
                        }
                    }
                    
                }
            }
            
        }
    }

    //推荐  
    >.recommend{
        background: @g3;
        .show-box{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            >.goods-box{
            width: 45%;
            height: 260px;
            background: @g1;
            margin: 5px;
            padding: 6px;
            border-radius: 8px;
            >.img-box{
                >img{
                border-radius: 8px;
                width: 100%;
                }
                >span{
                    display: block;
                    font-size: .7rem;
                    font-weight: 600;
                    margin-top: -4px;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 1;
                    overflow: hidden;
                }
            }
            >.title{
                font-size: .6rem;
                color: @c10;
                border-bottom: 1px solid @g5;
                line-height: 30px;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 1;
                overflow: hidden;
            }
            >.price{
                display: flex;
                justify-content: space-between;
                >span{
                    display: block;
                    margin-top: 10px;
                    font-size: 1.2rem;
                    color: red;
                }
                >.van-badge__wrapper{
                    margin-top: 4px;
                    margin-right: 10px;
                    color: @c8;
                }
            }
        }
        }

    }
  }


  //倒计时样式
.colon {
    display: inline-block;
    margin: 0 4px;
    color: red;
  }
  .block {
    display: inline-block;
    border-radius: 4px;
    width: 22px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    background-color: red;
  }
    
</style>